<template>
	<el-row>
		<el-col :span="24">
			<el-table class="table" :data="tableData" style="width: 100%;text-align: center">
				<el-table-column type="expand">
					<template slot-scope="props">
						<el-form label-position="left" inline class="zhcx-table-expand">
							<el-form-item label="车牌号码">
								<span>{{ props.row.plateNumber }}</span>
							</el-form-item>
							<el-form-item label="承包人">
								<span>{{ props.row.contractor }}</span>
							</el-form-item>
							<el-form-item label="费用类型">
								<span>{{['','押金','管理费'][props.row.paymentType]}}</span>
							</el-form-item>
							<el-form-item label="金额(元)">
								<span>{{ props.row.contractCost }}</span>
							</el-form-item>
							<el-form-item label="付款方式">
								<span>{{['未知','支付宝','微信','现金','刷卡'][props.row.paymentMethod]}}</span>
							</el-form-item>
							<el-form-item label="承包使用期">
								<span>{{props.row.startTime}} - {{props.row.endTime}}</span>
							</el-form-item>
							<el-form-item label="缴费时间">
								<span>{{ props.row.createDate }}</span>
							</el-form-item>
						</el-form>
						<el-button type="primary" class="option-btn" size="mini" @click="handlePrint(props.$index, props.row)">打印小票</el-button>
					</template>
				</el-table-column>

				<el-table-column prop="plateNumber" label="车牌号码">
				</el-table-column>
				<el-table-column prop="contractor" label="承包人">
				</el-table-column>
				<el-table-column prop="paymentType" label="费用类型">
					<template slot-scope="scope">
						{{['','押金','管理费'][scope.row.paymentType]}}
					</template>
				</el-table-column>
				<el-table-column prop="contractCost" label="金额(元)">
				</el-table-column>
				<el-table-column prop="paymentMethod" label="付款方式">
					<template slot-scope="scope">
						{{['未知','支付宝','微信','现金','刷卡'][scope.row.paymentMethod]}}
					</template>
				</el-table-column>
				<el-table-column prop="startTime" label="承包使用期" min-width="140">
					<template slot-scope="scope">
						{{scope.row.startTime}} - {{scope.row.endTime}}
					</template>
				</el-table-column>
				<el-table-column prop="createDate" label="缴费时间">
				</el-table-column>
				<el-table-column prop="deleteFlag" label="状态">
					<template slot-scope="scope">
						{{['正常','已作废','作废中'][scope.row.deleteFlag]}}
					</template>
				</el-table-column>
				<el-table-column label="操作" width="122">
					<template slot-scope="scope" v-if="scope.row.deleteFlag == '0'">
						<el-button class="option-btn" size="mini" @click="handleDelete(scope.$index, scope.row)">作废</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-col>
		<el-col :span="24" class="my-pagination">
			<el-pagination background layout="total, prev, pager, next" :total="total" :page-size="pageSize" :current-page="currentPage" @current-change="handleCurrentChange">
			</el-pagination>
		</el-col>
	</el-row>
</template>

<script>
	export default {
		name: "clbx-table",
		mounted() {
			this.loadData();
		},
		data() {
			return {
				total: 1, //分页数据总条数
				currentPage: 1,
				pageSize: 8,
				tableData: []
			};
		},
		methods: {
			loadData() {
				this.$http.post('iem/getContractFeeList', {
					currentPage: this.currentPage,
					pageSize: this.pageSize,
					_method: "PATCH"
				}, d => {
					if(d.status == '1') {
						this.tableData = d.rows;
						this.total = d.total;
					} else {
						this.tableData = [];
						this.total = 0;
					}
				});
			},
			// 切页
			handleCurrentChange(val) {
				this.currentPage = val;
				this.loadData();
			},
			handlePrint(index, row) {
				window.open(process.env.API_BASH_URL + "print/bkf/" + row.bh, "_blank", "directories=0,location=0,menubar=0,scrollbars=0,status=0,titlebar=0,toolbar=0");
			},
			handleDelete(index, row) {
				let that = this;
				layer.confirm('确认作废？<br><font color="red">注意：此操作不可逆！</font>', {
					icon: 3,
					title: '提示'
				}, function(index) {
					that.$http.post('iem/delContractFee/' + row.bh, {
						_method: 'DELETE'
					}, function(d) {
						if(d.status == '1') {
							layer.close(index);
							that.loadData();
							layer.msg(d.msg);
						} else {
							layer.msg(d.msg, {
								shift: 6
							});
						}
					});
				});
			}
		}
	}
</script>

<style>

</style>